<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TODO supply a title</title>
    </head>
    <body>
        <div>
            <ui:composition  xmlns="http://www.w3.org/1999/xhtml"
                             xmlns:ui="http://java.sun.com/jsf/facelets"
                             xmlns:h="http://java.sun.com/jsf/html"
                             xmlns:f="http://java.sun.com/jsf/core"
                             xmlns:a4j="http://richfaces.org/a4j"
                             xmlns:rich="http://richfaces.org/rich">
                <h:head>
                    <style type="text/css">
                        input[type = 'submit']{
                            margin:5px 0px 5px 10px;
                            padding:3px 5px 3px 5px;
                        }
                        .active-row {
                            background-color: #FFEBDA !important;
                            cursor: pointer;
                        }
                        .context-height{
                             min-height: 508px;
                        }
                    </style>
                </h:head>
                <h:form id="budget"> 
                    <rich:tabPanel switchType="client">
                        <rich:tab id="tab1" header="新增追加" contentClass="context-height">
                                <rich:toolbar id="tolbar1">
                                    <a4j:commandButton value="新建" render="tolbar1,editGroup1,fpg" action="#{budgetAddBean.add}"
                                                       oncomplete="#{rich:component('finProPanel')}.show()"/>
                                    <a4j:commandButton value="保存" render="tolbar1,editGroup1" action="#{budgetAddBean.checkSaveNew}"
                                                       execute="tab1"
                                                       onclick="this.disabled = 'true'"
                                                       disabled="#{!budgetAddBean.editStatusNew}"/>
                                    <a4j:commandButton value="取消" render="tolbar1,editGroup1" action="#{budgetAddBean.cancel}"/>
                                </rich:toolbar>
                                <h:panelGroup id="editGroup1">
                                    <div style="height:400px;overflow:auto">
                                        <rich:dataTable value="#{budgetAddBean.editli}" var="stats" rowKeyVar="index"
                                                        onrowmouseover="this.style.backgroundColor='#F1F1F1'"
                                                        onrowmouseout="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                                                        noDataLabel="无数据!"
                                                        style="width: 700px"
                                                        styleClass="tableStyle">
                                            <f:facet name="header">#{budgetAddBean.dept.name} -- 新增预算追加</f:facet>
                                            <rich:column style="width:30px;text-align: center">
                                                <f:facet name="header">行号</f:facet>
                                                <h:outputText value="#{index+1}"/>
                                            </rich:column>
                                            <rich:column>
                                                <f:facet name="header">财务项目</f:facet>
                                                <h:outputText value="#{stats.projName}"/>
                                            </rich:column>
                                            <rich:column>
                                                <f:facet name="header">部门</f:facet>
                                                <h:outputText value="#{stats.deptName}"/>
                                            </rich:column>
                                            <rich:column style="width:150px">
                                                <f:facet name="header">追加日期</f:facet>
                                                <rich:calendar value="#{stats.addDate}"
                                                               locale="zh_CN"
                                                               datePattern="yyyy年MM月dd日"
                                                               showApplyButton="false"
                                                               disabled="#{!budgetAddBean.editStatusNew}">
                                                    <a4j:ajax event="change" execute="@this" render="@this"/>
                                                </rich:calendar>
                                            </rich:column>
                                            <rich:column style="min-width:150px">
                                                <f:facet name="header">追加金额</f:facet>
                                                <h:inputText value="#{stats.budget}" style="width:100%"
                                                             disabled="#{!budgetAddBean.editStatusNew}">
                                                    <f:convertNumber pattern="#,##0.00" type="number"/>
                                                </h:inputText>
                                            </rich:column>
                                            <rich:column style="width:20%">
                                                <f:facet name="header">备注</f:facet>
                                                <h:inputText value="#{stats.memo}" style="width:100%" disabled="#{!budgetAddBean.editStatusNew}"/>
                                            </rich:column>
                                        </rich:dataTable>
                                    </div>
                                    <rich:jQuery selector=".tableStyle tr" event="click" query="jQuery(this).addClass('active-row')"/>
                                    <rich:jQuery selector=".tableStyle tr" event="click" query="jQuery('.tableStyle tr').not(this).removeClass('active-row')"/>
                                </h:panelGroup>
                        </rich:tab>
                        <rich:tab header="追加编辑" contentClass="context-height">
                            <rich:toolbar id="tolbar2">
                                <a4j:commandButton value="编辑" render="buttonArea,tolbar2,editGroup2" action="#{budgetAddBean.update}"
                                                   oncomplete="#{rich:component('finProPanel')}.show()"/>
                                <a4j:commandButton value="保存" render="tolbar2,editGroup2" action="#{budgetAddBean.checkSaveUpdate}"
                                                   onclick="this.disabled = 'true'"
                                                   disabled="#{!budgetAddBean.editStatusUpdate}"/>
                                <a4j:commandButton value="取消" render="tolbar2,editGroup2" action="#{budgetAddBean.cancel}"/>
                            </rich:toolbar>
                            <h:panelGroup id="editGroup2">
                                <div style="height:400px;overflow:auto">
                                    <rich:dataTable id="editTable" value="#{budgetAddBean.updateModel}" var="stats" rowKeyVar="index"
                                                    onrowmouseover="this.style.backgroundColor='#F1F1F1'"
                                                    onrowmouseout="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                                                    noDataLabel="无数据!"
                                                    style="width: 700px"
                                                    styleClass="tableStyle">
                                        <f:facet name="header">#{budgetAddBean.dept.name} -- 预算追加编辑</f:facet>
                                        <rich:column style="width:30px;text-align: center">
                                            <f:facet name="header">行号</f:facet>
                                            <h:outputText value="#{index+1}"/>
                                        </rich:column>
                                        <rich:column>
                                            <f:facet name="header">财务项目</f:facet>
                                            <h:outputText value="#{stats.projName}"/>
                                        </rich:column>
                                        <rich:column>
                                            <f:facet name="header">部门</f:facet>
                                            <h:outputText value="#{stats.deptName}"/>
                                        </rich:column>
                                        <rich:column style="width:150px">
                                            <f:facet name="header">追加日期</f:facet>
                                            <rich:calendar id="addDate"
                                                           value="#{stats.addDate}"
                                                           locale="zh_CN"
                                                           datePattern="yyyy年MM月dd日"
                                                           showApplyButton="false"
                                                           disabled="#{!budgetAddBean.editStatusUpdate}"/>
                                        </rich:column>
                                        <rich:column style="min-width:150px">
                                            <f:facet name="header">追加金额</f:facet>
                                            <h:inputText value="#{stats.budget}" style="width:100%"
                                                         disabled="#{!budgetAddBean.editStatusUpdate}">
                                                <f:convertNumber pattern="#,##0.00" type="number"/>
                                            </h:inputText>
                                        </rich:column>
                                        <rich:column style="width:20%">
                                            <f:facet name="header">备注</f:facet>
                                            <h:inputText value="#{stats.memo}" style="width:100%" disabled="#{!budgetAddBean.editStatusUpdate}"/>
                                        </rich:column>
                                        <rich:column style="width:35px;text-align: center">
                                            <a4j:commandLink value="删除" action="#{budgetAddBean.delete}" render="editTable"
                                                             onclick="this.disabled = 'true'"
                                                             disabled="#{!budgetAddBean.editStatusUpdate}"/>
                                        </rich:column>
                                    </rich:dataTable>
                                </div>
                                <rich:jQuery selector=".tableStyle tr" event="click" query="jQuery(this).addClass('active-row')"/>
                                <rich:jQuery selector=".tableStyle tr" event="click" query="jQuery('.tableStyle tr').not(this).removeClass('active-row')"/>
                            </h:panelGroup>
                        </rich:tab>
                    </rich:tabPanel>
                </h:form>
                <rich:popupPanel id="finProPanel" autosized="true">
                    <f:facet name="header">财务项目列表</f:facet>
                    <f:facet name="controls">
                        <h:outputLink value="#" onclick="#{rich:component('finProPanel')}.hide();
                                                           return false;">关闭</h:outputLink>
                    </f:facet>
                    <h:form>
                        <rich:panel id="fpg">
                            <h:panelGroup>
                                <h:message for="deptSel" id="mes-dept" style="color: red"/>
                                <h:panelGrid columns="2">
                                    <h:outputText value="请选择部门:"/>
                                    <h:selectOneMenu id="deptSel" value="#{budgetAddBean.dept.code}"
                                                     required="true" requiredMessage="请选择部门!">
                                        <f:selectItem itemValue="" itemLabel="-请选择-"/>
                                        <f:selectItems value="#{budgetAddBean.deptli}"/>
                                        <a4j:ajax event="change" execute="@this" render="mes-dept,buttonArea"
                                                  listener="#{budgetAddBean.deptChange}"/>
                                    </h:selectOneMenu>
                                </h:panelGrid>
                                <div style="width:460px;overflow: auto;">
                                    <rich:dataTable style="width:100%">
                                        <f:facet name="header">
                                            <rich:columnGroup>
                                                <rich:column style="width:40px">
                                                    选择
                                                </rich:column>
                                                <rich:column style="width:120px">
                                                    代码
                                                </rich:column>
                                                <rich:column>
                                                    名称
                                                </rich:column>
                                            </rich:columnGroup>
                                        </f:facet>
                                    </rich:dataTable>
                                    <div style="max-height:260px;overflow: auto;">
                                        <rich:dataTable id="orgTable" value="#{budgetAddBean.finProModel}" var="cols"
                                                        style="width:100%;margin-bottom:5px;">
                                            <rich:column style="width:40px;text-align:center">
                                                <h:selectBooleanCheckbox value="#{cols.selected}">
                                                    <a4j:ajax event="click" render="@this"/>
                                                </h:selectBooleanCheckbox>
                                            </rich:column>
                                            <rich:column style="width:120px">
                                                <h:outputText value="#{cols.code}"/>
                                            </rich:column>
                                            <rich:column>
                                                <h:outputText value="#{cols.name}"/>
                                            </rich:column>
                                        </rich:dataTable>
                                    </div>
                                </div>
                            </h:panelGroup>
                            <h:panelGroup id="buttonArea">
                                <a4j:commandButton value="新增预算追加" action="#{budgetAddBean.finProSelectedForNew}"
                                                   execute="fpg" render="tab1" disabled="#{empty budgetAddBean.dept.code}"
                                                   oncomplete="#{rich:component('finProPanel')}.hide();"
                                                   rendered="#{budgetAddBean.addOrUpdate}"/>
                                <a4j:commandButton value="编辑预算追加" action="#{budgetAddBean.finProSelectedForEdit}"
                                                   execute="@this" render="tolbar2,editGroup2" disabled="#{empty budgetAddBean.dept.code}"
                                                   oncomplete="#{rich:component('finProPanel')}.hide();"
                                                   rendered="#{!budgetAddBean.addOrUpdate}"/>
                                <a4j:commandButton value="取消" oncomplete="#{rich:component('finProPanel')}.hide();"/>
                            </h:panelGroup>
                        </rich:panel>
                    </h:form>
                </rich:popupPanel>
            </ui:composition>
        </div>
    </body>
</html>
